<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../icon/iconfont.css" />
    <style>
        body {
            padding: 1.6rem 0.8rem 0 0.8rem;
        }

        header span:nth-of-type(1) {
            font-size: 1rem
        }

        header span:nth-of-type(2) {
            font-size: 1rem
        }

        .title {
            padding: 0.8rem 0 0.4rem 0;
            /*text-align: center;*/
        }

        .box {
            width: 100%;
            height: 3rem;
            border-top: 1px solid rgb(223, 223, 225);
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
        }

        .left {
            float: left;
            width: 30%;
            height: 100%;
            border-right: 1px solid rgb(223, 223, 225);
            display: flex;
            align-items: center;
        }

        .left p {
            width: 100%;
            text-align: center;
            font-size: 0.9rem;
            /*color: rgb(215, 32, 45)*/
        }

        .right {
            position: relative;
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }

        .box1 {
            width: 100%;
            height: 3rem;
            border-bottom: 1px solid rgb(223, 223, 225);
            overflow: hidden;
        }

        .left1 {
            float: left;
            width: 30%;
            height: 100%;
            border-right: 1px solid rgb(223, 223, 225);
            display: flex;
            align-items: center;
        }

        .left1 p {
            width: 100%;
            text-align: center;
            font-size: 0.9rem;
            /*color: rgb(215, 32, 45)*/
        }

        .right1 {
            float: right;
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .right1 input {
            font-size: 0.9rem;
            padding-left: 0.5rem;
            padding-bottom: 0.2rem;
        }

        .submit {
            margin-top: 1rem;
            width: 100%;
            height: 2.3rem;
            background-color: rgb(215, 32, 45);
            text-align: center;
            line-height: 2.3rem;
            font-size: 0.9rem;
            color: #fff
        }

        #btn {
            position: absolute;
            right: 0;
            top: 0.7rem;
            background-color: rgb(215, 32, 45);
            color: #fff
        }
    </style>
</head>

<body>
    <header>
        <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
        <span>更换手机号</span>
    </header>
    <div class="content">
        <p class="title">更换手机后，下次登录可使用新手机号登录。当前手机号：18297999901</p>
        <div class="box">
            <div class="left">
                <p>手机号</p>
            </div>
            <div class="right">
                <input type="number" placeholder="请输入手机号码" id="tel">
                <button id="btn" style="width:3.8rem">验证码</button>
            </div>
        </div>
        <div class="box1">
            <div class="left1">
                <p>验证码</p>
            </div>
            <div class="right1">
                <input type="number" placeholder="请输入验证码" id="yzm">
            </div>
        </div>
        <button class="submit" id="submit">提交</button>
    </div>
</body>
<script type="text/javascript" src="../../../../script/api.js"></script>
<script type="text/javascript" src="../../../../lib/zepto.js"></script>
<script type="text/javascript" src="../../../../script/dns.js"></script>
<script type="text/javascript" src="../../../../script/aui-toast.js"></script>
<script type="text/javascript">
    apiready = function() {
        gettel()
    };
    var toast = new auiToast({
        })
    function gettel() {
        var tel = localStorage.getItem("tel");
        $(".title").text("更换手机后，下次登录可使用新手机号登录。当前手机号：" + tel)
    }
    // 获取验证码
    var btn_yzm = document.getElementById("btn");
    var tel = document.getElementById("tel");
    var yzm = document.getElementById("yzm");
    var submit = document.getElementById("submit");
    btn_yzm.onclick = function() {
        var phone = tel.value;
        if (!(/^1(3|4|5|7|8|9|6)\d{9}$/.test(phone))) {
            toast.fail({
                title:"请输入正确合法的手机号!",
                duration:1500
            });
            return false;
        }
        yzm.focus();
        clearInterval(timer);
        btn_yzm.style.backgroundColor = "#ccc";
        var time = 59;
        var timer = null;
        var that = this;
        timer = setInterval(function() {
            if (time <= 0) {
                that.innerHTML = "重新发送!"
                that.style.backgroundColor = "rgb(215, 32, 45)";
                btn_yzm.removeAttribute('disabled');
                clearInterval(timer)
            } else {
                that.innerHTML = time + 's'
                time--;
            }
        }, 1000);
        btn_yzm.setAttribute('disabled', 'disabled');
        console.log(tel.value);
        $.ajax({
            type: "get",
            dataType: 'json',
            data: {
                mobile: tel.value
            },
            url: dns + "smscode",
            success: function(res) {
              if(res.code == 20000){
                  // alert(res.data.msg)
                  toast.success({
                      title:"发送成功!",
                      duration:1500
                  });
              }
            },
            error:function(err){
              var json = JSON.parse(err.responseText);
              toast.fail({
                  title:json.msg,
                  duration:1500
              });
            }
        })
    }
    // 提交
    submit.onclick = function () {
      // console.log(888);
      var token = localStorage.getItem("token");
      // console.log(token);
      var yzmval = yzm.value;
      var telval = tel.value;
      if (!(/^1(3|4|5|7|8|6|9)\d{9}$/.test(telval))) {
          toast.fail({
              title:"请输入正确合法的手机号!",
              duration:1500
          });
          return false;
      }
      if(yzmval==''||yzmval.length!=6){
        toast.fail({
            title:"请输入正确的验证码!",
            duration:1500
        });
        return false;
      }
      $.ajax({
        type:"post",
        dataType: 'json',
        beforeSend:function (request) {
          request.setRequestHeader("token",token)
        },
        data:{
          mobile:telval,
          code:yzmval
        },
        url:dns+"user/update/mobile",
        success:function(res) {
          if(res.code == 20000){
              // alert(res.data.msg)
              toast.success({
                  title:"绑定成功!",
                  duration:1500
              });
          }
        },
        error:function(err){
          var json = JSON.parse(err.responseText);
          alert(json.msg);
        }
      })
    }
</script>

</html>
